<template>
  <div style="margin: 0 10px 10px">
    <ElForm inline>
      <ElFormItem label="名字">
        <ElInput></ElInput>
      </ElFormItem>
      <ElFormItem>
        <ElButton type="primary">查询</ElButton>
        <ElButton>重置</ElButton>
      </ElFormItem>
    </ElForm>
    <div style="display: flex; justify-content: space-between">
      <div>
        <ElButton @click="saveData">保存数据</ElButton>
        <ElButton @click="setData">设置数据</ElButton>
      </div>
      <div>
        <ElButton type="info" @click="deleteDialog = true">
          <el-icon>
            <Delete />
          </el-icon>
          回收站
        </ElButton>
      </div>
    </div>
  </div>
  <BaseAgGrid v-bind="gridOptions" />

  <ElDialog v-model="deleteDialog" title="回收站">
    <div style="height: 200px;">
      <BaseAgGrid v-bind="gridOptions" />
    </div>
    <template #footer>
      <ElButton @click="deleteDialog = false">取 消</ElButton>
      <ElButton type="primary" @click="deleteDialog = false">确 定</ElButton>
    </template>
  </ElDialog>
</template>

<script setup lang="ts">
import BaseAgGrid from '@/components/BaseAgGrid.vue'
import { ref } from 'vue'
import { type GridOptions, type ITextCellEditorParams } from 'ag-grid-community'
import EditorOpearRender from './components/editorOpearRender.vue'
import type { IOlympicData } from '@/views/types'

import json from './data/cus-cmp.json'

const rowData = ref<IOlympicData[]>([])
rowData.value = json as IOlympicData[]

const gridOptions = ref<GridOptions<IOlympicData>>({
  rowData: json,
  columnDefs: [
    // 行 文字居中
    {
      field: 'name', headerName: '名称', cellStyle: { textAlign: 'center' },
      cellEditor: "agTextCellEditor",
      cellEditorParams: {
        maxLength: 20,
      } as ITextCellEditorParams,
    },
    { field: 'age', headerName: '年龄' },
    { field: 'gender', headerName: '性别' },
    { field: 'phone', headerName: "电话" },
    { field: 'email', headerName: '邮箱' },
    { field: 'address', headerName: "地址", cellEditor: 'editorSplitCharRender' },
    { field: 'company', headerName: "公司" },
    { field: "isValid", headerName: "有效", cellRenderer: 'agCheckboxCellRenderer' },
    { field: 'detail', headerName: "详情", editable: false, cellRenderer: 'detailRender' },
    { headerName: "操作", pinned: "right", editable: false, suppressMovable: true, cellRenderer: EditorOpearRender, sortable: false, filter: false, width: 200 },
  ],
  defaultColDef: {
    flex: 1,
    editable: true,
  },
  enableCellSpan: true,
});

const saveData = () => {
  console.log('保存数据', rowData.value);
}

const setData = () => {
  rowData.value[2].address = "测试公司";
  console.log('设置数据');
}

const deleteDialog = ref(false);

import editorSplitCharRender from './components/editorSplitCharRender.vue'
import detailRender from './components/detailRender.vue'
defineExpose({
  editorSplitCharRender,
  detailRender
})
</script>

<style scoped></style>
